<template>
  <div id="children">
    <ul>
      <li v-for="i in anime" :key="i.id">{{i.name}}</li>
    </ul>
    <button @click="getAnime">把电影数据送出</button>
    <button @click="clearAnime">清空数据</button>
  </div>
</template>

<script>
import {nanoid} from "nanoid";
export default {
  name: "Children",
  data(){
    return{
      // anime:['Overlord','欢迎来到实力之上主义的教室','东京喰种','灼眼的夏娜','某科学的超电磁炮']
      anime:[
        {id:nanoid(),name:"Overlord"},
        {id:nanoid(),name:"欢迎来到实力之上主义的教室"},
        {id:nanoid(),name:"东京喰种"},
        {id:nanoid(),name:"灼眼的夏娜"},
        {id:nanoid(),name:"某科学的超电磁炮"},
      ]
    }
  },
  methods:{
    getAnime(){
      this.$emit('GetDate',this.anime)
    },
    clearAnime(){
      this.anime = []
      this.$forceUpdate()
    }
  }

}
</script>

<style scoped>
#children{
  height: 300px;
  background-color: #5bc0de;
}
</style>